<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  :root {
    --boradw: 600px;
    --boradh: 300px;
    --pointwh: 15px;
    --pointcolor: rgb(194, 194, 194, .5);
  }

  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
  }

  .broadcast {
    position: relative;
    width: var(--boradw);
    height: var(--boradh);
    background: #eeeeee;
  }

  .broadcast .image-box {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }

  .broadcast .move-box {
    /* width: calc(var(--boradw)*4); */
    height: 100%;
    display: flex;
    position: relative;
    right: 0;
    transition: 1s;
  }

  .broadcast .move-box img {
    display: inline-block;
    width: 100%;
    height: 100%;
  }

  .broadcast .cut-box {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;

  }

  .broadcast .cut {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    cursor: pointer;
    font-size: 20px;
  }

  .broadcast .point-box {
    position: absolute;
    bottom: 0;
    /* background: #000; */
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .broadcast .point {
    width: var(--pointwh);
    height: var(--pointwh);
    background-color: var(--pointcolor);
    margin: 0 10px;
    border-radius: 50%;
    cursor: pointer;
    transition: .5s;
  }

  .broadcast .point-box .active {
    background-color: rgb(255, 255, 255);
    transform: scale(1.2);
  }

  .broadcast .cut-box:hover>.cut {
    background: var(--pointcolor);
  }
</style>

<body>
  <section>
    <div class="broadcast">
      <div class="image-box">
        <div class="move-box" >
        </div>
      </div>
      <div class="cut-box">
        <div class="cut cut-left">&lt;</div>
        <div class="cut cut-right">&gt;</div>
      </div>
      <div class="point-box">
      </div>
    </div>
  </section>
  <script>
    const boradcastArr = [
      { url: './image/1.png', color: '#123' },
      { url: './image/2.png', color: '#234' },
      { url: './image/3.png', color: '#345' },
      { url: './image/4.png', color: '#456' }
    ]
    let i = 0



    const move = document.querySelector('.move-box')
    const bro = document.querySelector('.broadcast')
    move.style.width = boradcastArr.length * bro.offsetWidth + 'px'

    const moveBox = document.querySelector('.image-box .move-box')
    const pointBox = document.querySelector('.point-box')
    function rander() {
      for (let i = 0; i < boradcastArr.length; i++) {
        const imgEle = document.createElement('img')
        const divEle = document.createElement('div')
        imgEle.src = boradcastArr[i].url
        imgEle.style.backgroundColor = boradcastArr[i].color
        divEle.dataset.id = i
        divEle.className = i === 0 ? 'point active' : 'point'
        moveBox.appendChild(imgEle)
        pointBox.appendChild(divEle)
      }
    }
    rander()



    function moveTheBox() {
      if (i < 0) {
        moveBox.style.transition = '0s'
        i = boradcastArr.length - 1
      }
      else if (i > boradcastArr.length - 1) {
        moveBox.style.transition = '0s'
        i = 0
      }
      else{
        moveBox.style.transition = '1s'
      }
      moveBox.style.right = i * bro.offsetWidth + 'px'
      pointchange()
    }




    //点击左右切换
    const cutBox = document.querySelector('.cut-box')
    cutBox.addEventListener('click', function (e) {
      if (e.target.classList.contains('cut-left')) {
        i--
        moveTheBox()

      }
      if (e.target.classList.contains('cut-right')) {
        i++
        moveTheBox()
      }
    })

    function pointchange(){
      document.querySelector('.point-box .active').classList.remove('active')
      document.querySelector(`.point-box .point[data-id="${i}"]`).classList.add('active')
    }

    //底部按钮点击切换
    pointBox.addEventListener('click',function(e){
      if(e.target.classList.contains('point')){
        i = e.target.dataset.id
        pointchange()
        moveTheBox()
      }
    })

  </script>
</body>

</html>